<template>
  <div class="about">
    <h1>This is an about page</h1>
    <img src="../assets/logo.png" alt="">
     <Content :msg="msg"/>
    <p>
      {{this.$store.state.name}}----
      {{this.$store.state.msg}}
    </p>
    <button @click="btn">修改</button>
    <button @click="btn2">
        修改内容
    </button>
  </div>
</template>
<script>
import Content from '@/components/Content.vue'
export default {
  components: { Content },
  data() {
    return {
      msg:"哈哈哈，关于我们的事件"
    }
  },
  methods:{
    btn(){
      //这种方法不推荐使用
      // this.$store.state.name="狗蛋666"
      // this.$store.commit("change","狗蛋666")
      this.$store.dispatch('upChange',"狗蛋666")
      
    },
    btn2(){
      this.$store.commit("changeMsg",{name:"狗蛋",msg:"哈哈哈终于修改了"})
    }

  }
}
</script>
